<template>
  <ul class="tab-box">
    <li
      v-for="(item, index) in data"
      :key="index"
      :class="active === item.class ? 'active' : ''"
      :style="{'font-size': fontSize}"
      @click="switchTab(item.class)">
      {{ item.name }}
      <span v-if="item.num && item.num > 0" class="item-badge">{{ item.num >= 100 ? '99+' : item.num }}</span>
      <el-tooltip v-if="item.tooltip" effect="dark" placement="top">
        <div slot="content" style="max-width: 250px;">{{ item.tooltip }}</div>
        <i class="el-icon-warning-outline icon-info" />
      </el-tooltip>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'SwitchTab',
  props: {
    data: {
      type: Array,
      default() {
        return [];
      }
    },
    active: {
      type: String,
      default: ''
    },
    fontSize: {
      type: String,
      default: '16px'
    }
  },
  methods: {
    switchTab(val) {
      this.$emit('switchTab', val);
    }
  }
};
</script>

<style lang="scss" scoped>
.tab-box{
	display: flex;
	padding-left: 0;
	list-style: none;
  margin: 0;
	li{
    position: relative;
    // height: 32px;
    margin-right: 32px;
    padding-bottom: 6px;
		font-size: 16px;
		cursor: pointer;
		&.active{
			color: #406EFF;
			border-bottom: 2px solid #406EFF;
      font-weight: bold;
		}
    .item-badge {
      position: absolute;
      top: -7px;
      right: -16px;
      padding: 0 4px;
      height: 18px;
      min-width: 18px;
      line-height: 18px;
      text-align: center;
      border-radius: 10px;
      background-color: #FB5227;
      font-size: 12px;
      display: inline-block;
      color: #fff;
      transform: scale(0.9);
      margin-left: 4px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
    }
	}
  .icon-info {
    &:hover {
			color: #406EFF;
    }
  }
}
</style>
